<template>
  <div id="indexQuery" :class="[classActive ? 'out' : 'in']">
    <div id="felxBtn"></div>
    <div id="mainTable">
      <div id="tabs">
        <el-tabs type="border-card" stretch v-model="activeName">
          <el-tab-pane label="行政区" name="region">
            <el-select
              v-model="cityCode"
              placeholder="地级市"
              @change="selectCity"
              class="select1"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="cityItem in citys"
                :key="cityItem.code"
                :label="cityItem.cityName"
                :value="cityItem.code"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="countryCode"
              placeholder="区县"
              class="select2"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="country in countrys"
                :key="country.code"
                :label="country.countryName"
                :value="country.code"
              >
              </el-option>
            </el-select>
          </el-tab-pane>
          <el-tab-pane label="多边形" name="polygon">
            <el-button @click="drawing">绘制边界</el-button>
            <el-input
              type="textarea"
              :rows="3"
              placeholder='请输入坐标，用半角逗号（","）分隔'
              v-model="textarea"
            >
            </el-input>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div id="time">
        <span id="timeText">选择时间范围</span><br />
        <el-date-picker
          v-model="filters.column.create_start_date"
          type="date"
          :picker-options="pickerBeginDateBefore"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          popper-class="datePickerStyle"
        >
        </el-date-picker>
        <el-date-picker
          v-model="filters.column.create_end_date"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="pickerBeginDateAfter"
          placeholder="结束日期"
        >
        </el-date-picker>
      </div>

      <div id="slider">
        <span id="sliderText">云量</span>
        <el-slider v-model="sliderValue" :format-tooltip="formatTooltip">
        </el-slider>
      </div>

      <div id="satellite">
        <span id="satelliteText">选择卫星与传感器</span><br />
        <el-select
          v-model="satelliteCode"
          placeholder="卫星平台"
          @change="selectSatellite"
          :popper-append-to-body="false"
          class="satellite"
        >
          <el-option
            v-for="satellite in satellites"
            :key="satellite.platform"
            :label="satellite.platform"
            :value="satellite.code"
          >
          </el-option>
        </el-select>

        <el-select
          v-model="sensorCode"
          placeholder="传感器载荷"
          :popper-append-to-body="false"
          class="satellite"
        >
          <el-option
            v-for="sensor in sensors"
            :key="sensor.code"
            :label="sensor.sensor"
            :value="sensor.code"
          >
          </el-option>
        </el-select>
      </div>
      <div id="submit">
        <span></span>
        <el-button @click="submit" id="loseFocus">查询</el-button>
      </div>
    </div>
    <div id="flexBtn" @click="flex"></div>
  </div>
</template>

<script>
import { ipcRenderer } from "electron";
import cityList from "../../util/city";
import satelliteList from "../../util/satellite";

export default {
  data() {
    return {
      activeName: "region",
      classActive: false,
      citys: cityList,
      cityCode: "",
      countrys: null,
      countryCode: "",
      satellites: satelliteList,
      satelliteCode: "",
      sensors: null,
      sensorCode: "",
      textarea: "",
      wkt: "",
      filters: {
        column: {
          create_start_date: "",
          create_end_date: "",
        },
      },
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          let beginDateVal = this.filters.column.create_end_date;
          if (beginDateVal) {
            return time.getTime() > beginDateVal;
          }
        },
      },
      pickerBeginDateAfter: {
        disabledDate: (time) => {
          let beginDateVal = this.filters.column.create_start_date;
          if (beginDateVal) {
            return time.getTime() < beginDateVal;
          }
        },
      },
      sliderValue: 0,
    };
  },
  methods: {
    flex() {
      this.classActive = !this.classActive;
    },
    selectCity() {
      this.countryCode = "";
      this.citys.forEach((city) => {
        if (city.code == this.cityCode) {
          this.countrys = city.countrys;
        }
      });
    },
    selectSatellite() {
      this.sensorCode = "";
      this.satellites.forEach((satellite) => {
        if (satellite.code == this.satelliteCode) {
          this.sensors = satellite.sensors;
        }
      });
    },
    formatTooltip(val) {
      return val + "%";
    },
    submit() {
      // el-button解除按钮锁定状态
      document.getElementById("loseFocus").blur();

      // 表单缺省项检查
      if (this.activeName == "region" && !this.cityCode) {
        this.$message.error({
          duration: 1500,
          message: "请补全行政区划",
        });
      } else if (this.activeName == "polygon" && !this.textarea) {
        this.$message.error({
          duration: 1500,
          message: "请补全自定义范围",
        });
      } else if (
        !this.filters.column.create_start_date ||
        !this.filters.column.create_end_date
      ) {
        this.$message.error({
          duration: 1500,
          message: "请补全起始时间",
        });
      } else if (!this.satelliteCode || !this.sensorCode) {
        this.$message.error({
          duration: 1500,
          message: "请补全卫星及传感器",
        });
      } else {
        const loading = this.$loading({
          lock: true,
          text: "加载中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });

        if (this.activeName == "region") {
          // GF3 SAR系列专属API通道
          if (this.satelliteCode == "GF3") {
            this.$http.post(
              "http://36.112.130.153:7777/manage/meta/api/metadatas/records",
              {
                page: 1,
                size: 99999,
                area: this.countryCode ? this.countryCode : this.cityCode,
                scenetime: [
                  this.filters.column.create_start_date,
                  this.filters.column.create_end_date,
                ],
                imagingmode: [this.sensorCode],
                prodlevel: "1",
                satelliteSensor: ["GF3_SAR"],
                dwxtype: "ld",
                userType: 0,
                crossed: false,
                desc: ["scenetime"],
              },
              (res) => {
                let reslut = res.data.result;
                this.$message({
                  type: "success",
                  message: "共查询到" + res.data.size + "景数据！",
                  duration: 3000,
                });
                loading.close();
                if (res.data.size != 0) {
                  ipcRenderer.send("sendMsg", reslut);
                  ipcRenderer.send("open_datalistWindow");
                } else {
                  ipcRenderer.send("close_datalistWindow");
                }
              }
            );
          } else if (
            // GF5大气系列专属API通道
            this.satelliteCode == "GF5" &&
            (this.sensorCode == "AIUS" ||
              this.sensorCode == "DPC" ||
              this.sensorCode == "EMI" ||
              this.sensorCode == "GMI")
          ) {
            this.$http.post(
              "http://36.112.130.153:7777/manage/meta/api/metadatas/records",
              {
                page: 1,
                size: 99999,
                area: this.countryCode ? this.countryCode : this.cityCode,
                scenetime: [
                  this.filters.column.create_start_date,
                  this.filters.column.create_end_date,
                ],
                prodlevel: "1",
                satelliteSensor: [this.satelliteCode + "_" + this.sensorCode],
                dwxtype: "dq",
                userType: 0,
                crossed: false,
                desc: ["scenetime"],
              },
              (res) => {
                let reslut = res.data.result;
                this.$message({
                  type: "success",
                  message: "共查询到" + res.data.size + "景数据！",
                  duration: 3000,
                });
                loading.close();
                if (res.data.size != 0) {
                  ipcRenderer.send("sendMsg", reslut);
                  ipcRenderer.send("open_datalistWindow");
                } else {
                  ipcRenderer.send("close_datalistWindow");
                }
              }
            );
          } // 普通光学卫星通用API通道
          else {
            this.$http.post(
              "http://36.112.130.153:7777/manage/meta/api/metadatas/records",
              {
                page: 1,
                size: 99999,
                area: this.countryCode ? this.countryCode : this.cityCode,
                scenetime: [
                  this.filters.column.create_start_date,
                  this.filters.column.create_end_date,
                ],
                prodlevel: "1",
                satelliteSensor: [this.satelliteCode + "_" + this.sensorCode],
                cloudpsd: this.sliderValue,
                dwxtype: "gx",
                userType: 0,
                crossed: false,
                desc: ["scenetime"],
              },
              (res) => {
                let reslut = res.data.result;
                this.$message({
                  type: "success",
                  message: "共查询到" + res.data.size + "景数据！",
                  duration: 3000,
                });
                loading.close();

                this.$http.post(
                  "http://36.112.130.153:7777/manage/meta/api/metadatas/records/box",
                  {
                    page: 1,
                    size: 99999,
                    area: this.countryCode ? this.countryCode : this.cityCode,
                    scenetime: [
                      this.filters.column.create_start_date,
                      this.filters.column.create_end_date,
                    ],
                    satelliteSensor: [
                      this.satelliteCode + "_" + this.sensorCode,
                    ],
                    prodlevel: "1",
                    cloudpsd: this.sliderValue,
                    dwxtype: "gx",
                    userType: 0,
                    userId: null,
                    crossed: false,
                    desc: ["scenetime"],
                  },
                  (res) => {
                    const box = JSON.parse(res.data.result[0].geom);
                    ipcRenderer.send("sendBox", box);
                  }
                );

                if (res.data.size != 0) {
                  ipcRenderer.send("sendMsg", reslut);
                  ipcRenderer.send("open_datalistWindow");
                } else {
                  ipcRenderer.send("close_datalistWindow");
                }
              }
            );
          }
        } else if (this.activeName == "polygon") {
          // GF3 SAR系列专属API通道
          if (this.satelliteCode == "GF3") {
            this.$http.post(
              "http://36.112.130.153:7777/manage/meta/api/metadatas/records",
              {
                page: 1,
                size: 99999,
                geom: [this.wkt],
                scenetime: [
                  this.filters.column.create_start_date,
                  this.filters.column.create_end_date,
                ],
                imagingmode: [this.sensorCode],
                prodlevel: "1",
                satelliteSensor: ["GF3_SAR"],
                dwxtype: "ld",
                userType: 0,
                crossed: false,
                desc: ["scenetime"],
              },
              (res) => {
                let reslut = res.data.result;
                this.$message({
                  type: "success",
                  message: "共查询到" + res.data.size + "景数据！",
                  duration: 3000,
                });
                loading.close();
                if (res.data.size != 0) {
                  ipcRenderer.send("sendMsg", reslut);
                  ipcRenderer.send("open_datalistWindow");
                } else {
                  ipcRenderer.send("close_datalistWindow");
                }
              }
            );
          } else if (
            // GF5大气系列专属API通道
            this.satelliteCode == "GF5" &&
            (this.sensorCode == "AIUS" ||
              this.sensorCode == "DPC" ||
              this.sensorCode == "EMI" ||
              this.sensorCode == "GMI")
          ) {
            this.$http.post(
              "http://36.112.130.153:7777/manage/meta/api/metadatas/records",
              {
                page: 1,
                size: 99999,
                geom: [this.wkt],
                scenetime: [
                  this.filters.column.create_start_date,
                  this.filters.column.create_end_date,
                ],
                prodlevel: "1",
                satelliteSensor: [this.satelliteCode + "_" + this.sensorCode],
                dwxtype: "dq",
                userType: 0,
                crossed: false,
                desc: ["scenetime"],
              },
              (res) => {
                let reslut = res.data.result;
                this.$message({
                  type: "success",
                  message: "共查询到" + res.data.size + "景数据！",
                  duration: 3000,
                });
                loading.close();
                if (res.data.size != 0) {
                  ipcRenderer.send("sendMsg", reslut);
                  ipcRenderer.send("open_datalistWindow");
                } else {
                  ipcRenderer.send("close_datalistWindow");
                }
              }
            );
          } // 普通光学卫星通用API通道
          else {
            this.$http.post(
              "http://36.112.130.153:7777/manage/meta/api/metadatas/records",
              {
                page: 1,
                size: 99999,
                geom: [this.wkt],
                scenetime: [
                  this.filters.column.create_start_date,
                  this.filters.column.create_end_date,
                ],
                prodlevel: "1",
                satelliteSensor: [this.satelliteCode + "_" + this.sensorCode],
                cloudpsd: this.sliderValue,
                dwxtype: "gx",
                userType: 0,
                crossed: false,
                desc: ["scenetime"],
              },
              (res) => {
                let reslut = res.data.result;
                this.$message({
                  type: "success",
                  message: "共查询到" + res.data.size + "景数据！",
                  duration: 3000,
                });
                loading.close();


                this.$http.post(
                  "http://36.112.130.153:7777/manage/meta/api/metadatas/records/box",
                  {
                    page: 1,
                    size: 99999,
                    geom: [this.wkt],
                    scenetime: [
                      this.filters.column.create_start_date,
                      this.filters.column.create_end_date,
                    ],
                    satelliteSensor: [
                      this.satelliteCode + "_" + this.sensorCode,
                    ],
                    prodlevel: "1",
                    cloudpsd: this.sliderValue,
                    dwxtype: "gx",
                    userType: 0,
                    userId: null,
                    crossed: false,
                    desc: ["scenetime"],
                  },
                  (res) => {
                    const box = JSON.parse(res.data.result[0].geom);
                    ipcRenderer.send("sendBox", box);
                  }
                );

                if (res.data.size != 0) {
                  ipcRenderer.send("sendMsg", reslut);
                  ipcRenderer.send("open_datalistWindow");
                } else {
                  ipcRenderer.send("close_datalistWindow");
                }
              }
            );
          }
        }
      }
    },

    drawing() {
      ipcRenderer.send("drawing");
    },
  },
  computed: {
    watch_coordinantes() {
      return this.$store.state.coordinates;
    },
  },
  watch: {
    watch_coordinantes(value) {
      this.$data.textarea = value;
      this.$data.wkt = "POLYGON((" + value + "))";
    },
  },
};
</script>

<style lang="scss" scoped>
#indexQuery {
  width: 20%;
  height: 100%;
  position: relative;
  z-index: 99;
  top: -100%;
  #mainTable {
    width: 95%;
    height: 100%;
    background-color: #2b2b2b;
    float: left;
    #tabs {
      width: 100%;
    }
  }
  #flexBtn {
    width: 5%;
    height: 50%;
    border-top-right-radius: 80%;
    border-bottom-right-radius: 80%;
    background-color: #222225;
    position: relative;
    bottom: -50%;
    transform: translateY(-50%);
    float: right;
    cursor: pointer;
    background-image: url("../../assets/click.png");
    background-size: 5% 20%;
    background-repeat: no-repeat;
    background-position: 70% 50%;
  }

  #time {
    width: 100%;
    #timeText {
      text-align: center;
      margin-top: 10px;
      padding-top: 20px;
      margin-bottom: 10px;
      border-top: 1px solid #9c1a1a;
      width: 100%;
      display: inline-block;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      color: #7e7e7e;
      font-size: 14px;
    }
  }

  #slider {
    width: 100%;
    #sliderText {
      text-align: center;
      margin-top: 10px;
      padding-top: 20px;
      border-top: 1px solid #9c1a1a;
      width: 100%;
      display: inline-block;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      color: #7e7e7e;
      font-size: 14px;
    }
  }
  #satellite {
    width: 100%;
    #satelliteText {
      text-align: center;
      margin-top: 10px;
      padding-top: 20px;
      margin-bottom: 10px;
      border-top: 1px solid #9c1a1a;
      width: 100%;
      display: inline-block;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      color: #7e7e7e;
      font-size: 14px;
    }
  }
  #submit {
    width: 98%;
    margin-top: 20%;
    margin-left: 1%;
  }
}

.out {
  animation-name: out;
  animation-duration: 1s;
  transform: translateX(0%);
}
.in {
  animation-name: in;
  animation-duration: 1s;
  transform: translateX(-95%);
}

@keyframes out {
  from {
    transform: translateX(-95%);
  }
  to {
    transform: translateX(0%);
  }
}

@keyframes in {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-95%);
  }
}

/deep/ .el-tabs--border-card {
  background: #2b2b2b;
  border: 2px solid #2b2b2b;
  box-shadow: none;
}

/deep/
  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  color: #9c1a1a;
}

/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: #7e7e7e;
}

.el-textarea /deep/ textarea {
  margin-top: 10px;
  &::placeholder {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    color: #7e7e7e;
    font-size: 14px;
  }
}

/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #9c1a1a;
  background-color: #2b2b2b;
  border-right-color: #9c1a1a;
  border-left-color: #9c1a1a;
}

/deep/ .el-tabs--border-card > .el-tabs__header {
  background-color: #2b2b2b;
  border-bottom: 1px solid #9c1a1a;
}

.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}

/deep/ .el-tabs--border-card > .el-tabs__content {
  padding: 5px;
}

/deep/ .el-tabs__content {
  overflow: inherit;
}

/deep/.el-select {
  display: block;
  position: relative;
  width: 49%;
}

.select1 {
  float: left;
  margin-top: 20px;
}
.select2 {
  float: right;
  margin-top: 20px;
}

.satellite {
  width: 98%;
  margin-left: 1%;
  margin-top: 1%;
}
.satellite >>> .el-input__inner {
  width: 100%;
}

/deep/ .el-select .el-input__inner:focus {
  border-color: #9c1a1a;
}
/deep/ .el-select:hover .el-input__inner {
  border-color: #9c1a1a;
}
/deep/ .el-input__inner {
  background-color: #2b2b2b;
  border: 1px solid #9c1a1a;
  color: #9c1a1a;
  padding: 0 15px 0 5px;
  width: 100%;
  &::placeholder {
    color: #7e7e7e;
  }
}

/deep/ .el-select .el-input .el-select__caret {
  color: #9c1a1a;
}

/deep/ .el-select .el-input.is-focus .el-input__inner {
  border-color: #9c1a1a;
  background-color: #222225;
}

/deep/ .el-select-dropdown {
  border: 1px solid #9c1a1a;
  background-color: #222225;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
/deep/.el-scrollbar__thumb {
  background-color: #ffffff20;
  transition: 0.3s background-color;
}
/deep/ .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #9c1a1a;
}
/deep/ .el-select-dropdown__item.selected {
  color: #fff;
  font-weight: 600;
}

/deep/ .el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #9c1a1a;
}
/deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #222225;
}

/deep/ .el-button:focus,
.el-button:hover {
  color: #7e7e7e;
  border-color: #9c1a1a;
  background-color: #9c1a1a;
}
/deep/ .el-button {
  background: #2b2b2b;
  border: 1px solid #9c1a1a;
  color: #9c1a1a;
  width: 100%;
}

/deep/ .el-textarea__inner {
  color: #7e7e7e;
  background-color: #2b2b2b;
  border: 1px solid #9c1a1a;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  &::placeholder {
    color: #7e7e7e;
  }
  &::-webkit-scrollbar {
    width: 2px;
  }
  &::-webkit-scrollbar-track {
    background: #2b2b2b;
  }
  &::-webkit-scrollbar-thumb {
    background: #9c1a1a;
    border-radius: 1px;
  }
}
/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 48%;
  margin-left: 1%;
}

#time /deep/ .el-input__inner {
  padding: 0px 5px 0px 30px;
}

/deep/ .el-slider__runway {
  height: 4px;
  background-color: #7e7e7e;
}

/deep/ .el-slider__bar {
  height: 4px;
  background-color: #9c1a1a;
}

/deep/ .el-slider__button {
  width: 8px;
  height: 8px;
  border: 2px solid #9c1a1a;
  background-color: #7e7e7e;
}
.el-slider {
  width: 90%;
  margin-left: 5%;
}
</style>
